import React from 'react'
import { Breadcrumb,Icon,Button,DatePicker,Select } from 'antd'
import styles from './frequence-heatmap/frequenct-heatmap.less'
import request from "./../utils/request.js"
import areas from './../mock/areas.js'

export default class FrequenceHeatmap extends React.Component{
    constructor(props){
        super(props);
        this.bmap=React.createRef();
        this.state={
            myChart:null,
            bmap:null,
            startDate:"",
            endDate:"",
            currentProvince:"",
            points:[],
            areas:areas
        }
    }
    render(){
        return (
            <div  className={`${styles.pageContent} ${styles.frequenceHeatMap}`}>
                {/* 头部 */}
                <div className={styles.pageHeader} style={{backgroundColor:"#fff"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/">
                            <Icon type="home" />
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            使用频次热力图 
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                {/* 搜索框 */}
                <div className={styles.searchBar}>
                    <span>起止时间：</span>
                    <DatePicker.RangePicker onChange={this.setDate.bind(this)} style={{width:"552px"}} />
                    <span> &nbsp;省：</span>
                    <Select 
                        defaultValue="全国" 
                        onChange={this.handleProvinceSelect.bind(this)} 
                        style={{width:"120px"}}>
                        <Select.Option value="全国"> 全国 </Select.Option>
                        {
                            this.state.areas.map((item,index)=>{
                                return (<Select.Option value={item} key={item}>{item}</Select.Option>)
                            })
                        }        
                    </Select >
                    <Button type="primary" onClick={this.refresh.bind(this)}>
                        刷新
                        <Icon type="search" />
                    </Button>
                    <Button type="primary" onClick={this.reset.bind(this)}>
                        重置
                        <Icon type="undo" />
                    </Button>
                </div>
                {/* 百度地图热力图 */}
                <div id="bmap" className={styles.bmap}></div> 
            </div>
        )
    }
    componentDidMount(){
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
            var myChart=window.echarts.init(document.getElementById('bmap'))
            var points=da.data.map((item,index)=>{
                //return new Array(item.longitude,item.latitude,Math.floor(Math.random()*(100 - 1) + 1));
                return [item.longitude,item.latitude,Math.floor(Math.random()*(100 - 1) + 1)]
            });
            myChart.setOption({
                animation: false,
                bmap: {
                    center: [116.395645038,39.9299857781],
                    zoom: 10,
                    roam: true
                },
                visualMap: {
                    show: true,
                    top: 'top',
                    min: 0,
                    max: 5,
                    seriesIndex: 0,
                    calculable: true,
                    inRange: {
                        color: ['blue', 'blue', 'green', 'yellow', 'red']
                    }
                },
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'bmap',
                    data: points,
                    pointSize: 5,
                    blurSize: 6
                }]
            });
            this.setState({
                myChart:myChart
            },()=>{
                var bmap = this.state.myChart.getModel().getComponent('bmap').getBMap();
                 bmap.addControl(new window.BMap.NavigationControl({
                    anchor: window.BMAP_ANCHOR_BOTTOM_LEFT
                }));   
                bmap.addControl(new window.BMap.MapTypeControl(
                    {
                        type:window.BMAP_MAPTYPE_CONTROL_HORIZONTAL,
                        mapTypes:new Array(window.BMAP_NORMAL_MAP,window.BMAP_SATELLITE_MAP)
                    }
                ));  
                //地图类型第三个常量window.BMAP_HYBRID_MAP混合或3D地图有问题，这里就必须传入详细参数啦。
                bmap.disableDoubleClickZoom();
                //开发这里的时候需要明确注意哪些是echarts API哪些是bmap API。 
            })
        },function(err){  //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    }      
    setDate=(date,dateString)=>{
        this.setState({
            startDate:dateString[0],
            endDate:dateString[1] 
        })
    }
    refresh(){
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
            var points=da.data.slice(17000).map((item,index)=>{
                //return new Array(item.longitude,item.latitude,Math.floor(Math.random()*(10 - 1) + 1));
                //两种写法是一样的，eslint给出警告，认为最好用下面这个字面量写法
                return [item.longitude,item.latitude,Math.floor(Math.random()*(10 - 1) + 1)]
            });
            this.state.myChart.setOption({
                series: [{                   
                    data: points
                }]
            })
        },function(err){  //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    }
    reset(){
        this.setState({
            startDate:"",
            endDate:"",
            currentProvince:"",
        });
        request("http://localhost:8094/point/getAllPoints?tableName=yuntu_orgdt_beijing_user_heat_map_info",{},(da)=>{ //成功
            var points=da.data.slice(15000).map((item,index)=>{
                //return new Array(item.longitude,item.latitude,Math.floor(Math.random()*(50 - 1) + 1));
                return [item.longitude,item.latitude,Math.floor(Math.random()*(50 - 1) + 1)]
            });
            this.state.myChart.setOption({
                series: [{                   
                    data: points
                }]
            })
        },function(err){ //可能是网络错误，也有可能是业务错误
            console.log(err);
        },"POST");
    }
    handleProvinceSelect(val){
        this.setState({
            currentProvince:val
        });
    }
}
/**
 * 我尝试使用npm中的echarts，测试结果总是有问题，热力图显示总是不太正常，应该是写法上的问题，这种
 *      传统dom结构的写法是送script标记中搬过来的，这里一次还是需要在index.html中引入上面写法才有效，否则总是会出现热力图无法渲染的情况。
 *      这个问题的根源有可能是因为百度地图的关系，他不支持npm，而我这里的echart是与bmap混合的写法。
 * 可以独立npm安装echarts试试，如果不涉及百度实体地图应该都没有这些问题。
 */
